<template>
	<view class="money-wrapper">
		<view class="money-theme">
			<view class="theme-outlay" @click="money.theme='支出'" :class="{yes:money.theme==='支出'}">
				支出
			</view>
			<view class=" theme-income" @click="money.theme='收入'" :class="{yes:money.theme==='收入'}">收入</view>
		</view>
		<view class=" theme-note">
			<view>备注 ：</view>
			<input type="text" placeholder="请在此处输入备注" v-model="money.note">
		</view>
		<view class="theme-note">
			<view>金额 ：</view>
			<input type="text" placeholder="请在此处输入金额" v-model="money.number">
		</view>
		<view class="money-button">
			<view class="bar"></view>
			<button @click="ok">确定</button>
			<button class="close" @click="close">取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: {
					theme: '支出',
					note: '',
					number: undefined,
				}
			}
		},
		inject: ["toggle", "setToggle"],
		methods: {
			ok() {
				this.$store.commit('addMoney', this.money)
				uni.showToast({
					title: '创建成功'
				})
				this.money = {
					theme: '支出',
					note: '',
					number: undefined,
				}
				this.setToggle()
			},
			close() {
				this.setToggle()
			}
		}
	}
</script>

<style lang="scss">
	.money-wrapper {
		padding: 5px;
	}

	.money-theme {
		display: flex;
		justify-content: center;
		align-items: center;

		>.theme-income,
		.theme-outlay {
			width: 50%;
			text-align: center;
			padding: 5px;
		}

		>.yes {
			border-radius: 5px;
			box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
			background-color: rgba(235, 231, 231, 0.5);
		}
	}

	.theme-note {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;

		input {
			padding: 5px;
			font-size: 14px;
			border-radius: 5px;
			border: 1px solid #a1a0a0;
		}
	}

	.money-button {
		display: flex;
		justify-content: flex-end;
		padding: 5px;

		>.bar {
			flex-grow: 1;
		}

		>button {
			background: rgb(59, 85, 71);
			color: rgb(221, 216, 216);
			padding: 5px 15px;
			border-radius: 5px;
			border: 1px solid #a1a0a0;
			box-shadow: 1px 1px 2px 2px rgb(223, 220, 220);
		}

		>.close {
			margin: 0px 10px;
			background: rgb(132, 134, 133);
		}
	}
</style>
